<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> 发红包 </title>
</head>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<body style=""><!-- background: url(../../img/headBackImage.jpg) no-repeat;background-size: cover; -->
    <div style="display: block;">
        <button style="margin-left: 80px;margin-top: 50px;position: relative;" class="btn btn-lg btn-info" onclick="addLarge();">增加</button>
        <button style="margin-left: 160px;margin-top: 50px;position: relative;" class="btn btn-lg btn-info" onclick="add();">增加user</button>
        <ul style="margin-top: 280px;position: fixed;">
            <div class="progress progress-striped" style="width:300px;height:50px;transform: rotate(-90deg);">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
                 style="width: 0%;"></div>
            </div>
        </ul>
    </div>  
    <div id="mainIP" hidden="hidden"><%=httpUrl%>|<%=socketUrl%></div>
</body>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/bootstrap.js"></script>
<script type="text/javascript">
    var connectIP = $("#mainIP").html();
    var ip =connectIP.split("|")[0];
    var socketUrl=connectIP.split("|")[1];

    // 主监听socket   用来控制 次监听socket
    var mainSocket='';
    var mainUrl= socketUrl +'mainsocket';
    // 次监听socket
    var socket = '';
    var url = socketUrl+'tugofwar_summary';

    var userNum=0;
    var tem = 0;
    var template = 0;

        /*var logger = document.getElementsByTagName('ul')[0], index  = 0;
        var host= window.location.host;
        var wsCtor = window['MozWebSocket'] ? MozWebSocket : WebSocket;
        // var url= "ws://"+host+"/tugofwar";
        var socket = new wsCtor(url);//, 'echo-protocol'
        var log = function(text) {
            logger.innerHTML += '<li>' + text + '</li>';
        };*/

    $(function() {
        mainWebSocket();
    })
    // 连接mainWebSocket  服务
    function mainWebSocket(){
        if ('WebSocket' in window)
            mainSocket = new WebSocket(mainUrl);
        else if ('MozWebSocket' in window)
            mainSocket = new MozWebSocket(mainUrl);
        //打开连接时触发
        mainSocket.onopen = function() {
            console.log('OPEN: ' + mainSocket.protocol);
        };
        //收到消息时触发
        mainSocket.onmessage = function(message) {
            console.log("mainsocket收到消息了"+message);
            var string = message.data.split(":");
            var objMsg = string[0];
            var controlMsg = string[1];
            if(objMsg == ""){
                getwebsocket();
                console.log("mainsocket处理完消息了"+message);
            }
        };  
    }
    // 连接websocket  服务
    function getwebsocket(){
        if ('WebSocket' in window)
            socket = new WebSocket(url);
        else if ('MozWebSocket' in window)
            socket = new MozWebSocket(url);
        //打开连接时触发
        socket.onopen = function() {
            console.log('OPEN: ' + socket.protocol);
        };
        //收到消息时触发
        socket.onmessage = function(data) {
            addLarge(data);
        };
    }
    // 控制
    function addLarge(){
        // tem +=1;
        // if(tem/10==1){
        //   tem = 0;
          template += 1;
        // }

        $("ul").html(
            ' <div class="progress progress-striped" style="width:300px;height:50px;transform: rotate(-90deg);">'+
                '<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" '+
                  'style="width: '+template+'%;"></div>'+
            ' </div>'
        );
    }
    function add(){
        alert("功能暂时未做")
        // userNum +=1
        // $("body").append('<ul id="'+userNum+'"></ul><button class="btn btn-lg btn-info" onclick="addLarge();">增加</button>')
    }
</script>
</html>